<template>
  <div>
    <div class="category-banner-wrapper">
      <div class="w-content">
        <div class="category-banner-title fs-48 fw-700 d-flex flex-start">{{ title }}</div>
        <div class="category-banner-desc d-flex flex-jc-sb fs-24">{{ desc }}</div>
      </div>
    </div>
    <div class="breadcrumb-wrapper">
      <div class="w-content d-flex flex-ai-c">
        <nav>
          <ol class="breadcrumb d-flex fs-16">
            <li class="breadcrumb-item c-999"><a href="#" @click.prevent="goToSys(0)">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
import portalUtil from '@/utils/portal-util'

export default {
  name: 'CategoryBanner',
  props: {
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: '关注，了解最新动态'
    }
  },
  methods: {
    goToSys(index) {
      portalUtil.gotoPageIndex(this, index, {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.category-banner-wrapper {
  width: 100%;
  height: 271px;
  color: $portalWhiteColor;
  padding-top: 80px;
  background-image: url('~@/assets/portal_images/category_banner_bg.png');
  background-size: 100% 100%;

  .category-banner-title {
    height: 64px;
    line-height: 64px;
  }

  .category-banner-desc {
    margin-top: 16px;
    height: 31px;
    line-height: 31px;
  }
}

.breadcrumb-wrapper {
  background-color: #F9FAFC;
  height: 67px;
}

.breadcrumb-wrapper a:hover {
  color: #5f8abf;
}

.breadcrumb-wrapper .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  margin-right: 4px;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:hover {
  color: #1f425d;
}

.breadcrumb-wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  font-family: "Font Awesome 5 Pro";
  color: #D6D8D8;
  font-size: 14px;
}
</style>
